<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="../plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="../plugins/summernote/summernote-bs4.min.css">
</head>

<body>
    第一个页面
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-edit"></i>
                                Buttons
                            </h3>
                        </div>
                        <div class="card-body pad table-responsive">
                            <p>Various types of buttons. Using the base class <code>.btn</code></p>
                            <table class="table table-bordered text-center">
                                <tbody>
                                    <tr>
                                        <th>Normal</th>
                                        <th>Large <code>.btn-lg</code></th>
                                        <th>Small <code>.btn-sm</code></th>
                                        <th>Extra Small <code>.btn-xs</code></th>
                                        <th>Flat <code>.btn-flat</code></th>
                                        <th>Disabled <code>.disabled</code></th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-default">Default</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-default btn-lg">Default</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-default btn-sm">Default</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-default btn-xs">Default</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-default btn-flat">Default</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-default disabled">Default</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-primary">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-primary btn-lg">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-primary btn-sm">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-primary btn-xs">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-primary btn-flat">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-primary disabled">Primary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-secondary">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-secondary btn-lg">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-secondary btn-sm">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-secondary btn-xs">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-secondary btn-flat">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-secondary disabled">Secondary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-success">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-success btn-lg">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-success btn-sm">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-success btn-xs">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-success btn-flat">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-success disabled">Success</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info">Info</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info btn-lg">Info</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info btn-xs">Info</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info btn-flat">Info</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-info disabled">Info</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-danger">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-danger btn-lg">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-danger btn-sm">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-danger btn-xs">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-danger btn-flat">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-danger disabled">Danger</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-warning">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-warning btn-lg">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-warning btn-sm">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-warning btn-xs">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-warning btn-flat">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-warning disabled">Warning</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-light">Light</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-light btn-lg">Light</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-light btn-sm">Light</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-light btn-xs">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-light btn-flat">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-light disabled">Light</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark btn-lg">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark btn-sm">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark btn-xs">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark btn-flat">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-block btn-dark disabled">Dark</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- ./row -->

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-edit"></i>
                                Outline Buttons
                            </h3>
                        </div>
                        <div class="card-body pad table-responsive">
                            <p>Various types of buttons. Using the base class <code>.btn</code></p>
                            <table class="table table-bordered text-center">
                                <tbody>
                                    <tr>
                                        <th>Normal</th>
                                        <th>Large <code>.btn-lg</code></th>
                                        <th>Small <code>.btn-sm</code></th>
                                        <th>Extra Small <code>.btn-xs</code></th>
                                        <th>Flat <code>.btn-flat</code></th>
                                        <th>Disabled <code>.disabled</code></th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary btn-lg">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary btn-sm">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary btn-xs">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary btn-flat">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-primary disabled">Primary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary btn-lg">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary btn-sm">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary btn-xs">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary btn-flat">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-secondary disabled">Secondary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success btn-lg">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success btn-sm">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success btn-xs">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success btn-flat">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-success disabled">Success</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-outline-info">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-info btn-lg">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-info btn-sm">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-info btn-xs">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-info btn-flat">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-info disabled">Info</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger btn-lg">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger btn-sm">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger btn-xs">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger btn-flat">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-danger disabled">Danger</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning btn-lg">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning btn-sm">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning btn-xs">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning btn-flat">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-warning disabled">Warning</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-outline-light">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-light btn-lg">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-light btn-sm">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-light btn-xs">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-light btn-flat">Light</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-light disabled">Light</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-dark btn-lg">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-dark btn-sm">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-dark btn-xs">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-dark btn-flat">Dark</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block btn-outline-dark disabled">Dark</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- ./row -->

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-edit"></i>
                                Gradient Buttons (bg-gradient-*)
                            </h3>
                        </div>
                        <div class="card-body pad table-responsive">
                            <p>Various types of buttons. Using the base class <code>.btn</code></p>
                            <table class="table table-bordered text-center">
                                <tbody>
                                    <tr>
                                        <th>Normal</th>
                                        <th>Large <code>.btn-lg</code></th>
                                        <th>Small <code>.btn-sm</code></th>
                                        <th>Extra Small <code>.btn-xs</code></th>
                                        <th>Flat <code>.btn-flat</code></th>
                                        <th>Disabled <code>.disabled</code></th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary btn-lg">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary btn-sm">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary btn-xs">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-primary disabled">Primary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary btn-lg">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary btn-xs">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-secondary disabled">Secondary</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success btn-lg">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success btn-sm">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success btn-xs">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success btn-flat">Success</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-success disabled">Success</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-block bg-gradient-info">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-info btn-lg">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-info btn-sm">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-info btn-xs">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-info btn-flat">Info</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-info disabled">Info</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger btn-lg">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger btn-sm">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger btn-xs">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-danger disabled">Danger</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning btn-lg">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning btn-sm">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning btn-xs">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-block bg-gradient-warning disabled">Warning</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- ./row -->
            <div class="row">
                <div class="col-md-6">
                    <!-- Buttons with Icons -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Buttons with Icons</h3>
                        </div>
                        <div class="card-body row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-primary btn-block"><i class="fa fa-bell"></i>
                                    .btn-block</button>
                                <button type="button" class="btn btn-info btn-block btn-flat"><i class="fa fa-bell"></i>
                                    .btn-block .btn-flat</button>
                                <button type="button" class="btn btn-danger btn-block btn-sm"><i class="fa fa-bell"></i>
                                    .btn-block .btn-sm</button>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-outline-primary btn-block"><i
                                        class="fa fa-bell"></i>
                                    .btn-block</button>
                                <button type="button" class="btn btn-outline-info btn-block btn-flat"><i
                                        class="fa fa-book"></i> .btn-block .btn-flat</button>
                                <button type="button" class="btn btn-outline-danger btn-block btn-sm"><i
                                        class="fa fa-book"></i> .btn-block .btn-sm</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->

                    <!-- Block buttons -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Block Buttons</h3>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-default btn-block">.btn-block</button>
                            <button type="button" class="btn btn-default btn-block btn-flat">.btn-block
                                .btn-flat</button>
                            <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
                        </div>
                    </div>
                    <!-- /.card -->

                    <!-- Horizontal grouping -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Horizontal Button Group</h3>
                        </div>
                        <div class="card-body table-responsive pad">
                            <p>
                                Horizontal button groups are easy to create with bootstrap. Just add your buttons
                                inside <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
                            </p>

                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th>Button</th>
                                        <th>Icons</th>
                                        <th>Flat</th>
                                        <th>Dropdown</th>
                                    </tr>
                                    <!-- Default -->
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default">Left</button>
                                                <button type="button" class="btn btn-default">Middle</button>
                                                <button type="button" class="btn btn-default">Right</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default">1</button>
                                                <button type="button" class="btn btn-default">2</button>

                                                <div class="btn-group">
                                                    <button type="button"
                                                        class="btn btn-default dropdown-toggle dropdown-icon"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- ./default -->
                                    <!-- Info -->
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info">Left</button>
                                                <button type="button" class="btn btn-info">Middle</button>
                                                <button type="button" class="btn btn-info">Right</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info">1</button>
                                                <button type="button" class="btn btn-info">2</button>

                                                <div class="btn-group">
                                                    <button type="button"
                                                        class="btn btn-info dropdown-toggle dropdown-icon"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /. info -->
                                    <!-- /.danger -->
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-danger">Left</button>
                                                <button type="button" class="btn btn-danger">Middle</button>
                                                <button type="button" class="btn btn-danger">Right</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-danger">1</button>
                                                <button type="button" class="btn btn-danger">2</button>

                                                <div class="btn-group">
                                                    <button type="button"
                                                        class="btn btn-danger dropdown-toggle dropdown-icon"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.danger -->
                                    <!-- warning -->
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning">Left</button>
                                                <button type="button" class="btn btn-warning">Middle</button>
                                                <button type="button" class="btn btn-warning">Right</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning">1</button>
                                                <button type="button" class="btn btn-warning">2</button>

                                                <div class="btn-group">
                                                    <button type="button"
                                                        class="btn btn-warning dropdown-toggle dropdown-icon"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.warning -->
                                    <!-- success -->
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success">Left</button>
                                                <button type="button" class="btn btn-success">Middle</button>
                                                <button type="button" class="btn btn-success">Right</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success">1</button>
                                                <button type="button" class="btn btn-success">2</button>

                                                <div class="btn-group">
                                                    <button type="button"
                                                        class="btn btn-success dropdown-toggle dropdown-icon"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.success -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.card -->

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Appended Buttons</h3>
                        </div>
                        <div class="card-body">
                            <strong>With dropdown</strong>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-default dropdown-toggle"
                                        data-toggle="dropdown">
                                        Action
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <!-- /btn-group -->
                                <input type="text" class="form-control">
                            </div>
                            <!-- /input-group -->
                            <strong>Normal</strong>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-danger">Action</button>
                                </div>
                                <!-- /btn-group -->
                                <input type="text" class="form-control">
                            </div>
                            <!-- /input-group -->
                            <strong>Flat</strong>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control rounded-0">
                                <span class="input-group-append">
                                    <button type="button" class="btn btn-info btn-flat">Go!</button>
                                </span>
                            </div>
                            <!-- /input-group -->
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                    <!-- split buttons box -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Split buttons</h3>
                        </div>
                        <div class="card-body">
                            <!-- Split button -->
                            <p class="mb-1">Normal split buttons:</p>

                            <div class="margin">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">Action</button>
                                    <button type="button" class="btn btn-default dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info">Action</button>
                                    <button type="button" class="btn btn-info dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger">Action</button>
                                    <button type="button" class="btn btn-danger dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success">Action</button>
                                    <button type="button" class="btn btn-success dropdown-toggle"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">Action</button>
                                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                            </div>

                            <!-- flat split buttons -->
                            <p class="mt-3 mb-1">Flat split buttons:</p>

                            <div class="margin">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-flat">Action</button>
                                    <button type="button" class="btn btn-default btn-flat dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info btn-flat">Action</button>
                                    <button type="button" class="btn btn-info btn-flat dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger btn-flat">Action</button>
                                    <button type="button" class="btn btn-danger btn-flat dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success btn-flat">Action</button>
                                    <button type="button" class="btn btn-success btn-flat dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning btn-flat">Action</button>
                                    <button type="button" class="btn btn-warning btn-flat dropdown-toggle dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                            </div>

                            <!-- Split button -->
                            <p class="mt-3 mb-1">Hoverable split buttons:</p>
                            <div class="margin">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">Action</button>
                                    <button type="button"
                                        class="btn btn-default dropdown-toggle dropdown-hover dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info">Action</button>
                                    <button type="button"
                                        class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger">Action</button>
                                    <button type="button"
                                        class="btn btn-danger dropdown-toggle dropdown-hover dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success">Action</button>
                                    <button type="button"
                                        class="btn btn-success dropdown-toggle dropdown-hover dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">Action</button>
                                    <button type="button"
                                        class="btn btn-warning dropdown-toggle dropdown-hover dropdown-icon"
                                        data-toggle="dropdown">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- end split buttons box -->
                </div>
                <!-- /.col -->
                <div class="col-md-6">
                    <!-- Application buttons -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Application Buttons</h3>
                        </div>
                        <div class="card-body">
                            <p>Add the classes <code>.btn.btn-app</code> to an <code>&lt;a&gt;</code> tag to achieve the
                                following:</p>
                            <a class="btn btn-app">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <a class="btn btn-app">
                                <i class="fas fa-play"></i> Play
                            </a>
                            <a class="btn btn-app">
                                <i class="fas fa-pause"></i> Pause
                            </a>
                            <a class="btn btn-app">
                                <i class="fas fa-save"></i> Save
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-warning">3</span>
                                <i class="fas fa-bullhorn"></i> Notifications
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-success">300</span>
                                <i class="fas fa-barcode"></i> Products
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-purple">891</span>
                                <i class="fas fa-users"></i> Users
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-teal">67</span>
                                <i class="fas fa-inbox"></i> Orders
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-info">12</span>
                                <i class="fas fa-envelope"></i> Inbox
                            </a>
                            <a class="btn btn-app">
                                <span class="badge bg-danger">531</span>
                                <i class="fas fa-heart"></i> Likes
                            </a>

                            <p>Application Buttons with Custom Colors</p>
                            <a class="btn btn-app bg-secondary">
                                <span class="badge bg-success">300</span>
                                <i class="fas fa-barcode"></i> Products
                            </a>
                            <a class="btn btn-app bg-success">
                                <span class="badge bg-purple">891</span>
                                <i class="fas fa-users"></i> Users
                            </a>
                            <a class="btn btn-app bg-danger">
                                <span class="badge bg-teal">67</span>
                                <i class="fas fa-inbox"></i> Orders
                            </a>
                            <a class="btn btn-app bg-warning">
                                <span class="badge bg-info">12</span>
                                <i class="fas fa-envelope"></i> Inbox
                            </a>
                            <a class="btn btn-app bg-info">
                                <span class="badge bg-danger">531</span>
                                <i class="fas fa-heart"></i> Likes
                            </a>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->

                    <!-- Vertical grouping -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Vertical Button Group</h3>
                        </div>
                        <div class="card-body table-responsive pad">

                            <p>
                                Vertical button groups are easy to create with bootstrap. Just add your buttons
                                inside <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
                            </p>

                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th>Button</th>
                                        <th>Icons</th>
                                        <th>Flat</th>
                                        <th>Dropdown</th>
                                    </tr>
                                    <!-- Default -->
                                    <tr>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-default">Top</button>
                                                <button type="button" class="btn btn-default">Middle</button>
                                                <button type="button" class="btn btn-default">Bottom</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-default">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-default">1</button>
                                                <button type="button" class="btn btn-default">2</button>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- ./default -->
                                    <!-- Info -->
                                    <tr>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-info">Top</button>
                                                <button type="button" class="btn btn-info">Middle</button>
                                                <button type="button" class="btn btn-info">Bottom</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-info">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-info btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-info">1</button>
                                                <button type="button" class="btn btn-info">2</button>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-info dropdown-toggle"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /. info -->
                                    <!-- /.danger -->
                                    <tr>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-danger">Top</button>
                                                <button type="button" class="btn btn-danger">Middle</button>
                                                <button type="button" class="btn btn-danger">Bottom</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-danger">1</button>
                                                <button type="button" class="btn btn-danger">2</button>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-danger dropdown-toggle"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.danger -->
                                    <!-- warning -->
                                    <tr>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-warning">Top</button>
                                                <button type="button" class="btn btn-warning">Middle</button>
                                                <button type="button" class="btn btn-warning">Bottom</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-warning">1</button>
                                                <button type="button" class="btn btn-warning">2</button>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-warning dropdown-toggle"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.warning -->
                                    <!-- success -->
                                    <tr>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-success">Top</button>
                                                <button type="button" class="btn btn-success">Middle</button>
                                                <button type="button" class="btn btn-success">Bottom</button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-success">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-left"></i>
                                                </button>
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-center"></i>
                                                </button>
                                                <button type="button" class="btn btn-success btn-flat">
                                                    <i class="fas fa-align-right"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical">
                                                <button type="button" class="btn btn-success">1</button>
                                                <button type="button" class="btn btn-success">2</button>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-success dropdown-toggle"
                                                        data-toggle="dropdown">
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- /.success -->
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->

                    <!-- Radio Buttons -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Radio Button Group</h3>
                        </div>
                        <div class="card-body table-responsive pad">
                            <p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                    <input type="radio" name="options" id="option_a1" autocomplete="off" checked="">
                                    Active
                                </label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option_a2" autocomplete="off"> Radio
                                </label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option_a3" autocomplete="off"> Radio
                                </label>
                            </div>

                            <p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn bg-olive active">
                                    <input type="radio" name="options" id="option_b1" autocomplete="off" checked="">
                                    Active
                                </label>
                                <label class="btn bg-olive">
                                    <input type="radio" name="options" id="option_b2" autocomplete="off"> Radio
                                </label>
                                <label class="btn bg-olive">
                                    <input type="radio" name="options" id="option_b3" autocomplete="off"> Radio
                                </label>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /. row -->
        </div><!-- /.container-fluid -->
    </section>










    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button)
    </script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="../plugins/chart.js/Chart.min.js"></script>
    <!-- Sparkline -->
    <script src="../plugins/sparklines/sparkline.js"></script>
    <!-- JQVMap -->
    <script src="../plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="../plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="../plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- daterangepicker -->
    <script src="../plugins/moment/moment.min.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Summernote -->
    <script src="../plugins/summernote/summernote-bs4.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.js"></script>

    <script src="../myjs/index.js"></script>
</body>

</html>